cascading style sheets reference

בוררי הקשר

הסבר

הבורר הראשון שראינו, בורר האלמנטים של HTML, נותן למפתחים שליטה על מראה דפי האתר שלהם; אך זה מאוד מסובך. זה הכל או כלום; כל פיסקה או אף פיסקה בכלל
בוררי מעמד נותנים לנו שליטה על כיצד ייראו סוגים שונים או מעמדות שונים של אלמנטים.
נותנים לנו שליטה עדינה על מראה האלמנטים של HTML, כאשר הם מקושרים עם אלמנטים אחרים של HTML.

או שתשתמשו או שלא תשתמשו בתווי הדגשה או בתווי הדגשה חזקים (<EM> או <STRONG>), ותעדיפו במקומם את התווים המודגשים והנוטים. אם תזכרו את חוק הזהב, תפרידו את הסגנון מן התוכן, אתם תראו שהתווים הקודמים הם מועדפים. כך, עבור דוגמא זו, אני אדבר על התווים ההגיוניים הללו, יותר מאשר על התווים הפיזיים.

בדרך כלל, בתווית ה-STRONG הטקסט מופיע כמודגש בדף האתר. בעזרת דף הסגנון, אולי תצליחו להתגבר על זה בכך שתהפכו את טקסטSTRONG שיופיע בצבע שונה, פונט שונה או במספר דרכים. הבה נניח שאנו רוצים לעקוב אחר מוסכמות טיפוגרפיות, אנו נגרום לכך שטקסSTRONG יופיע כמודגש. כדי לעשות זאת בעזרת בורר אלמנט של HTML, אנו נוסיף את ההצהרה הבאה לדף הסגנון שלנו:

STRONG {font-weight: bold}

מה אם היינו רוצים להשתמש בתווית STRONGבתוך כותרת, והכותרות שלנו כבר מודגשות? בעזרת ההצהרה למעלה, טקסט STRONG יופיע באותה צורה כמו הטקסט שמסביבו. מה שהיינו רוצים הוא שטקסט STRONG יופיע בצורה אחרת כאשר הוא בתוך כותרת. זה מה שבוררי הקשר מאפשרים לנו לעשות.

תחביר

בורר ההקשר הוא פשוט רשימה של בוררי אלמנטים של HTML, שכל אחד מהם מופרד ע"י רווח. לדוגמא, טקסט ה- STRONG בתוך בורר כותרת ייווצר כך

H1 STRONG {text-decoration: underline}

הצהרה זו בוחרת כל אלמנט STRONG שהוא בתוך כותרת מרמה 1 ומציירת אותו עם קו הדגשה תחתון.

אתם יכולים ליצור בוררי הקשר מכל עומק שהוא, למשל P LI STRONG בוחר אלמנטים STRONG בתוך פריטי רשימה, בתוך פסקאות.

שימוש

בורר ההקשר מאפשר לנו שליטה עדינה הרבה יותר על מראה הדף. לא תמצאו את עצמכם משתמשים בו בתכיפות, אך הוא יכול להיות בעל ערך רב.
בורר זה יכול, למעשה, לשמש אותנו עם בוררים, חוץ מאשר עם בוררי אלמנטים של HTML. אם נחזור לדוגמת השאלה והתשובה שלנו, אנו יכולים ליצור בוררים עבור רשימות בתוך פסקאות שאלה, ורשימות בתוך פסקאות תשובה, כדי לתת מראה מובחן לכל סוג של רשימה. שני הבוררים שלנו יהיו כך:

P.question LI
(list items inside paragraphs of class "question")

P.answer LI
(list items inside paragraphs of class "answer")

כפי שנראה מיד, ישנם מספר סוגים אחרים של בורר, שניתן להשתמש בכל אחד מהם יחד עם בוררי הקשר.

CSS2

CSS2 מתייחס לבוררי הקשר כבוררי צאצא. זה מכיוון שהם בוחרים אלמנטים כאשר הם הצאצאים של בוררים מסוימים, זאת אומרת, כאשר הם מוכלים בתוך בוררים מסוימים. בורר CSS2 שקשור, ושאותו נבקר בקרוב, הוא בורר הילד.